<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <!--vue前端js框架-->
    <link rel="stylesheet" href="css/index.css"> <!-- 放哪无所谓 -->
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
</head>
<style>
	.calendar-movie-container {
	    display: flex;
	    width: 800px;
	    margin: 0 auto;
	}
	.el-calendar {
	    width: 50%;
	}
	.movie-preview {
	    width: 50%;
	    position: relative;
	}
	.movie-preview img {
	    width: 100%;
	    height: auto;
	}
	.movie-info {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    background-color: rgba(0, 0, 0, 0.7);
	    color: white;
	    padding: 10px;
	}
</style>
<body>
    <div id="app">
        <template>
            <div class="calendar-movie-container">
                <el-calendar v-model="value">
                    <div
                        slot="dateCell"
                        slot-scope="{ data }"
                        @click="viewDayWork(data)"
                        v-popover:popover
                    >
                        <p>
                            {{ data.day.split("-").slice(2).join() }}
                        </p>
                    </div>
                </el-calendar>
                <div class="movie-preview">
                    <img v-bind:src="moviePoster" alt="电影海报">
                    <div class="movie-info">
                        <p>{{ movieTitle }}</p>
                        <p>{{ movieReleaseDate }}</p>
                        <p>{{ movieReleaseInfo }}</p>
                    </div>
                </div>
            </div>
        </template>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            value: new Date(),
            moviePoster: "",
            movieTitle: "",
            movieReleaseDate: "",
            movieReleaseInfo: ""
        },
        methods: {
            viewDayWork(data) {
                const date = data.day;
                // 模拟根据日期获取电影信息，实际应通过接口获取
                if (date === "2025-03-08") {
                    this.moviePoster = "https://example.com/movie-poster.jpg"; // 替换为实际海报链接
                    this.movieTitle = "还有明天";
                    this.movieReleaseDate = "03/08";
                    this.movieReleaseInfo = "3月08日 上映5部";
                } else {
                    // 其他日期清空或设置默认电影信息
                    this.moviePoster = "";
                    this.movieTitle = "";
                    this.movieReleaseDate = "";
                    this.movieReleaseInfo = "";
                }
                alert(`你点击了日期：${date}`);
            },
            dian() {
                alert("1111");
            }
        }
    });
</script>

</html>